<template>
    <div style="display: flex; align-items: center; justify-content: center;">
        <van-icon name="bars" style="margin: 20px;" @click="tiaoz" />
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <span>登录</span>
    </div>
    <swiper :list="list"></swiper>

    <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="(v, i) in list2" :key="i">
            <van-image :src="v.image_src" />
        </van-grid-item>
    </van-grid>


    <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="(v, i) in list3" :key="i" @click="xiangq(v.goods_id)">
            <van-image
                :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
        </van-grid-item>
    </van-grid>




</template>

<script setup>
import { ref } from 'vue';
import swiper from '@/components/swiper.vue';
import { swiperApi, catitemsApi, searchApi } from '@/api/api';
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
//轮播图
let list = ref('')
const onSubmit = () => {
    swiperApi().then((res) => {
        list.value = res.data.message
    })
};
onSubmit()
//nav
let list2 = ref('')
const catitems = () => {
    catitemsApi().then((res) => {
        list2.value = res.data.message
    })
};
catitems()
//瀑布流
let list3 = ref('')
const search = () => {
    searchApi().then((res) => {
        list3.value = res.data.message.goods
    })
};
search()

const tiaoz = () => {
    router.push('/list')
}
const xiangq = (goods_id) => {
    router.push({path:"/detail",query:{goods_id:goods_id}})
}
</script>

<style lang="scss" scoped></style>